<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加学分记录</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="活动" prop="activityId">
          <activity-select v-model="form.activityId" placeholder="请选择活动" :disabled="!!form.activityId" />
          <div v-if="activityInfo.title" class="activity-info">
            <p><strong>活动标题：</strong>{{ activityInfo.title }}</p>
            <p><strong>活动类型：</strong>{{ activityInfo.categoryName }}</p>
            <p><strong>活动时间：</strong>{{ parseTime(activityInfo.startTime) }} 至 {{ parseTime(activityInfo.endTime) }}</p>
          </div>
        </el-form-item>
        <el-form-item label="用户" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" :disabled="!!form.userId" />
          <div v-if="userInfo.userName" class="user-info">
            <p><strong>用户名称：</strong>{{ userInfo.userName }}</p>
            <p v-if="userInfo.deptName"><strong>所属部门：</strong>{{ userInfo.deptName }}</p>
          </div>
        </el-form-item>
        <el-form-item label="学分值" prop="creditValue">
          <el-input-number v-model="form.creditValue" :precision="2" :step="0.1" :min="0" :max="10" />
          <span class="form-tip">请根据活动类型和参与情况合理设置学分值</span>
        </el-form-item>
        <el-form-item label="学期" prop="semester">
          <el-select v-model="form.semester" placeholder="请选择学期">
            <el-option
              v-for="semester in semesterOptions"
              :key="semester"
              :label="semester"
              :value="semester"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addCredit, getCurrentSemester, getSemesterList } from "@/api/secondclass/credit";
import { getActivity } from "@/api/secondclass/activity";
import { getUser } from "@/api/system/user";
import ActivitySelect from "@/components/ActivitySelect";

export default {
  name: "AddCredit",
  components: { ActivitySelect },
  data() {
    return {
      // 表单参数
      form: {
        activityId: null,
        userId: null,
        creditValue: 1,
        semester: null,
        status: "0",
        remark: null
      },
      // 活动信息
      activityInfo: {},
      // 用户信息
      userInfo: {},
      // 学期选项
      semesterOptions: [],
      // 表单校验
      rules: {
        activityId: [
          { required: true, message: "活动不能为空", trigger: "change" }
        ],
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" }
        ],
        creditValue: [
          { required: true, message: "学分值不能为空", trigger: "blur" }
        ],
        semester: [
          { required: true, message: "学期不能为空", trigger: "change" }
        ]
      }
    };
  },
  created() {
    // 从URL参数中获取活动ID和用户ID
    if (this.$route.query.activityId) {
      this.form.activityId = Number(this.$route.query.activityId);
      this.getActivityInfo(this.form.activityId);
    }
    if (this.$route.query.userId) {
      this.form.userId = Number(this.$route.query.userId);
      this.getUserInfo(this.form.userId);
    }
    
    // 获取学期列表
    this.getSemesterOptions();
    
    // 获取当前学期
    this.getCurrentSemester();
  },
  methods: {
    /** 获取活动信息 */
    getActivityInfo(activityId) {
      getActivity(activityId).then(response => {
        this.activityInfo = response.data;
      });
    },
    /** 获取用户信息 */
    getUserInfo(userId) {
      getUser(userId).then(response => {
        this.userInfo = response.data;
      });
    },
    /** 获取学期选项 */
    getSemesterOptions() {
      getSemesterList().then(response => {
        this.semesterOptions = response.data;
      });
    },
    /** 获取当前学期 */
    getCurrentSemester() {
      getCurrentSemester().then(response => {
        this.form.semester = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addCredit(this.form).then(response => {
            this.$modal.msgSuccess("添加学分记录成功");
            this.goBack();
          });
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.goBack();
    },
    /** 返回上一页 */
    goBack() {
      this.$router.push({ path: "/secondclass/credit" });
    }
  }
};
</script>

<style scoped>
.activity-info, .user-info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}
.activity-info p, .user-info p {
  margin: 5px 0;
}
.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}
</style> 